<template>
  <el-container class="home-container">
    <transition name="fade">
      <el-main v-if="showHome">
        <el-row justify="center" align="middle" class="hero-section">
          <el-col :span="24" class="text-center">
            <h1 class="main-title">好工作 从一份简历开始</h1>
            <el-button 
              type="primary" 
              size="large" 
              class="button"
              @click="showStepForm"
              ref="ref1">
              我的信息
            </el-button>
            <el-button 
              type="primary" 
              size="large" 
              class="button"
              @click="handleResumeMallClick"
              ref="ref2">
              简历商城
            </el-button>
            <el-button 
              type="primary" 
              size="large" 
              class="button"
              @click="showDraftDrawer"
              ref="ref3">
              草稿箱
            </el-button>

            <el-tour v-model="openTour">
              <el-tour-step 
                :target="ref1?.$el" 
                title="我的信息"
                description="在这里可以完善你的通用信息，后续的简历模板都会在这个基础上进行初始化"
                placement="bottom"/>
              <el-tour-step 
                :target="ref2?.$el" 
                title="简历商城"
                description="如果想要创建特定的简历，可以在简历商城当中寻找合适的模板。每一个新建的简历与通用信息是隔离的，所以不用担心会被覆盖"
                placement="bottom"/>
              <el-tour-step 
                :target="ref3?.$el" 
                title="草稿箱"
                description="在草稿箱中可以看到你创建的简历，你可以点进去再编辑，或是将它删除"
                placement="bottom"/>
            </el-tour>
          </el-col>
        </el-row>

        <!-- 简历商城部分 -->
        <el-tabs v-model="activeTab" type="border-card" class="resume-tabs">
          <!-- 导航栏 -->
          <el-tab-pane label="全部" name="all">
            <el-row :gutter="20">
              <el-col 
                v-for="template in filteredTemplates" 
                :key="template.id" 
                :xs="24" :sm="12" :md="8" :lg="6"
              >
                <el-card class="template-card"
                  @click="handleTemplateClick(template)">
                  <img :src="template.preview" class="template-preview" />
                  <div class="template-info">
                    <h3>{{ template.name }}</h3>
                    <p class="creator">创建者：{{ template.creator }}</p>
                    <div class="tags">
                      <el-tag
                        v-for="(tag, index) in template.tags"
                        :key="index"
                        type="info"
                        size="small"
                        class="tag"
                      >
                        {{ tag }}
                      </el-tag>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-tab-pane>
          <!-- 具体模板 -->
          <el-tab-pane 
            v-for="category in categories" 
            :key="category" 
            :label="category" 
            :name="category"
          >
            <el-row :gutter="20">
              <el-col 
                v-for="template in filteredTemplates.filter(t => t.category === category)" 
                :key="template.id" 
                :xs="24" :sm="12" :md="8" :lg="6"
              >
                <el-card class="template-card" 
                @click="handleTemplateClick(template)">
                  <img :src="template.preview" class="template-preview" />
                  <div class="template-info">
                    <h3>{{ template.name }}</h3>
                    <p class="creator">创建者：{{ template.creator }}</p>
                    <div class="tags">
                      <el-tag
                        v-for="(tag, index) in template.tags"
                        :key="index"
                        type="info"
                        size="small"
                        class="tag"
                      >
                        {{ tag }}
                      </el-tag>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </transition>
    
    <transition name="slide-up">
      <StepForm v-if="showForm" @hide-form="hideStepForm" />
    </transition>

    <el-drawer
      v-model="showDraft"
      title="草稿箱"
      direction="rtl"
      size="30%"
      :before-close="hideDraftDrawer">
      <div class="draft-list">
        <el-card
          v-for="draft in drafts"
          :key="draft.id"
          class="draft-item"
          @click="openDraft(draft)">
          <div class="draft-preview">
            <img src="../../database_design.png" alt="草稿预览" />
          </div>
          <div class="draft-info">
            <h4>{{ draft.template }} 模板</h4>
            <p>创建时间：{{ formatDate(draft.createdAt) }}</p>
            <p>最后修改：{{ formatDate(draft.updatedAt) }}</p>
          </div>
        </el-card>
      </div>
    </el-drawer>
  </el-container>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { 
  ElContainer, 
  ElMain, 
  ElRow, 
  ElCol, 
  ElCard, 
  ElButton, 
  ElTabs, 
  ElTabPane, 
  ElTag,
  ElTour,
  ElTourStep,
  ElMessageBox
} from 'element-plus'
import { useRouter } from 'vue-router'
import { useResumeStore } from '../store/resume'
import StepForm from './StepForm.vue'

const showHome = ref(true)
const showForm = ref(false)
const activeTab = ref('all')
const openTour = ref(false)
const ref1 = ref(null)
const ref2 = ref(null)
const ref3 = ref(null)

onMounted(async () => {
  try {
    await ElMessageBox.confirm('是否要开始新手教程？', '欢迎使用', {
      confirmButtonText: '开始教程',
      cancelButtonText: '跳过',
      type: 'info'
    })
    openTour.value = true
  } catch {
    openTour.value = false
  }
})
const showDraft = ref(false)
const resumeStore = useResumeStore()
const drafts = ref([])

const showDraftDrawer = () => {
  loadDrafts()
  showDraft.value = true
}

const hideDraftDrawer = () => {
  showDraft.value = false
}

const loadDrafts = async () => {
  await resumeStore.loadDrafts()
  drafts.value = [...resumeStore.drafts].sort((a, b) => 
    new Date(b.updatedAt) - new Date(a.updatedAt)
  )
}

const formatDate = (dateString) => {
  const date = new Date(dateString)
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`
}

const openDraft = (draft) => {
  router.push({
    path: '/preview',
    query: {
      id: draft.id
    }
  })
}

// 简历模板数据
const templates = [
  {
    id: 3,
    name: '简洁简历',
    creator: '教育团队',
    tags: ['简约', '正式', '黑白'],
    preview: 'database_design.png',
    category: '简洁',
    template: 'custom_resume_2',
    address: './Resumes/custom_resume_2.vue'
  },
  {
    id: 4,
    name: '样例简历',
    creator: '林祎眠',
    tags: ['简约', '正式'],
    preview: 'database_design.png',
    category: '简洁',
    template: 'my_resume',
    address: './Resumes/my_resume.vue'
  },
  {
    id: 0,
    name: '测试',
    creator: '设计团队',
    tags: ['分栏', '专业', '蓝色'],
    preview: 'database_design.png',
    category: '左右分栏',
  },
  {
    id: 1,
    name: '左右分栏简历',
    creator: '设计团队',
    tags: ['分栏', '专业', '蓝色'],
    preview: 'database_design.png',
    category: '左右分栏'
  },
  {
    id: 2,
    name: '表格简历',
    creator: '设计师A',
    tags: ['表格', '清晰', '现代'],
    preview: 'database_design.png',
    category: '表格'
  },
]

// 分类列表
const categories = ['左右分栏', '表格', '简洁']

// 筛选后的模板
const filteredTemplates = computed(() => {
  return activeTab.value === 'all' 
    ? templates 
    : templates.filter(t => t.category === activeTab.value)
})

const showStepForm = () => {
  showHome.value = false
  setTimeout(() => {
    showForm.value = true
  }, 300)
}

const hideStepForm = () => {
  showForm.value = false
  setTimeout(() => {
    showHome.value = true
  }, 500)
}

const router = useRouter()

const handleTemplateClick = (template) => {
  router.push({
    path: '/preview',
    query: {
      template: template.template,
      address: template.address
    }
  })
}

const handleResumeMallClick = ()=>{
  const offset = 400;
  window.scrollTo({
    top: offset,
    behavior: 'smooth'
  });
}

</script>

<style scoped>
.home-container {
  min-height: 100vh;
  position: relative;
}

/* 淡出动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 从下向上滑动动画 */
.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.5s ease;
}

.slide-up-enter-from {
  transform: translateY(100%);
}

.slide-up-leave-to {
  transform: translateY(100%);
}

.hero-section {
  padding: 80px 20px;
}

.main-title {
  font-size: 3.5rem;
  color: #0288D1;
  margin-bottom: 40px;
  font-weight: 800;
  text-shadow: 0px 0px 4px #7db0e3;
}

.resume-tabs {
  width: 90vw;
  margin: 40px auto;
  width: 90vw;
  margin: 40px auto;
  max-width: 1200px;
}

.template-card {
  margin-bottom: 20px;
  transition: transform 0.3s ease;
  min-width: 270px;
}

.template-card:hover {
  transform: translateY(-5px);
}

.template-preview {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.template-info {
  padding: 15px;
}

.template-info h3 {
  margin: 0 0 10px;
  font-size: 1.2rem;
  color: #333;
}

.creator {
  margin: 0 0 10px;
  color: #666;
  font-size: 0.9rem;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.tag {
  margin-right: 5px;
}

.button {
  background-color: #1976D2;
  border: none;
  padding: 12px 36px;
  font-size: 1.1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.draft-list {
  padding: 16px;
}

.draft-item {
  margin-bottom: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.draft-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.draft-preview img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 4px;
}

.draft-info {
  padding: 8px;
}

.draft-info h4 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.draft-info p {
  margin: 4px 0;
  font-size: 0.8rem;
  color: #666;
}

@media (max-width: 768px) {
  .main-title {
    font-size: 2rem;
  }
  
  .template-card {
    margin-bottom: 20px;
  }
}
</style>
